<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主轴上面的对齐方式</title>
    <style type="text/css">
        div{
            display: flex;
            width: 500px;
            height: 500px;
            border: 1px solid   red;
            /*justify-content: flex-end;*/
            /*justify-content: center;*/
            /*
            justify-content: space-between
            设置两端对齐，如果项目比较多，他们仍然会显示在一行，但是中间的距离就没有了，紧紧
            的挨着

            */
            /*justify-content: space-between;*/
            /*
              justify-content: space-around;
              两端的间隔是一样的
            */
            justify-content: space-around;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

    </style>
</head>
<body>
   <div>
       <span>第一个项目</span>
       <span>第二个项目</span>
       <span>第三个项目</span>
       <span>第一个项目</span>
       <span>第二个项目</span>
       <span>第三个项目</span>

   </div>
</body>
</html>